<template>
  <el-scrollbar>
    <div style="padding: 20px">
      <el-card class="box-card" shadow="never" style="margin-bottom: 10px">
        <div class="main_header">
          <div style="display: flex;justify-content: space-between">
            <div>
              <el-input
                v-model="searchData.url"
                style="width: 200px; margin-left: 10px"
                icon="el-icon-search"
                placeholder="请输入链接搜索"
              />
              <el-button style="margin-left: 10px" type="primary" @click="load">搜索</el-button>
            </div>
            <div>
              <el-button type="primary" @click="addContent">
                <span style="vertical-align: middle"> 新增 </span></el-button>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card" shadow="never">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{
            color: 'black',
            background: 'rgb(250, 250, 250)',
            padding: '20px 0',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column prop="id" label="id" width="200" />
          <el-table-column prop="article" label="文章">
            <template #default="scope">
              <el-tag style="cursor: pointer" @click="preview(scope.row)">详情</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" :formatter="dateFormat" label="创建时间" />
          <el-table-column prop="updated_at" :formatter="dateFormat" label="修改时间" />
          <el-table-column v-if="$store.state.user.is_super" label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button type="primary" style="margin-right: 10px" @click="editContent(scope.row)">
                <span style="vertical-align: middle"> 编辑 </span></el-button>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="top"
                width="160"
              >
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="deltaskList(scope.$index)">取消</el-button>
                  <el-button type="primary" size="mini" @click="delContent(scope.row,scope.$index)">确定</el-button>
                </div>
                <el-button slot="reference" type="danger">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <div style="margin: 20px 0">
            <el-pagination
              :current-page="pageNum"
              :page-size="pageSize"
              :page-sizes="[5, 10, 20]"
              layout="prev, pager, next"
              :total="total"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>
    </div>

    <el-drawer
      title="添加文章"
      :visible.sync="centerDialogAdd"
      size="50%"
    >
      <div style="padding: 20px 40px">
        <el-form ref="form" :label-position="label" label-width="80px" :model="form" :rules="rules">
          <el-form-item label="文章" prop="article">
            <div style="border: 1px solid #ccc;">
              <el-input
                v-model="form.article"
                type="textarea"
                :rows="30"
                placeholder="请输入内容"
              />
            </div>
          </el-form-item>
          <div style="margin: 20px 0" />
        </el-form>
        <div style="flex: auto;">
          <el-button @click="centerDialogAdd = false">返回</el-button>
          <el-button type="primary" @click="sendAddContent"> 确认</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="修改文章"
      :visible.sync="centerDialogEdit"
      size="50%"
    >
      <div style="padding: 20px 40px">
        <el-form ref="form" :label-position="label" label-width="80px" :model="form" :rules="rules">
          <el-form-item label="文章" prop="article">
            <div style="border: 1px solid #ccc;">
              <div style="border: 1px solid #ccc;">
                <el-input
                  v-model="form.article"
                  type="textarea"
                  :rows="30"
                  placeholder="请输入内容"
                />
              </div>
            </div>
          </el-form-item>
          <div style="margin: 20px 0" />
        </el-form>
        <div style="flex: auto;">
          <el-button @click="centerDialogEdit = false">返回</el-button>
          <el-button type="primary" @click="sendEditContent"> 确认</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="查看文章"
      :visible.sync="centerDialogPreview"
      size="50%"
    >
      <div style="padding: 20px 40px">
        <el-card class="box-card" v-text="form.article" />
      </div>
    </el-drawer>
  </el-scrollbar>
</template>
<script>
import { CreateContent, DeleteContent, UpdateContent, getContent } from '@/api/content'
import moment from 'moment'
import store from '@/store'

export default {
  name: 'Content',
  data() {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      label: 'top',
      loading: false,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      searchData: {
        url: '',
        page_num: 1,
        page_size: 5
      },
      centerDialogAdd: false,
      centerDialogEdit: false,
      centerDialogPreview: false,
      title: '用户信息',
      form: {},
      options: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  created() {
    this.load()
  },
  methods: {

    deltaskList(index) {
      this.$refs[`popover-${index}`].doClose()
    },
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY年MM月DD日 HH:mm:ss')
    },
    load() {
      this.loading = true
      this.searchData.page_num = this.pageNum
      this.searchData.page_size = this.pageSize
      getContent(this.searchData).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
        this.loading = false
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    handleSelectionChange(val) {

    },
    addContent() {
      this.centerDialogAdd = true
      this.form = {}
    },
    preview(row) {
      this.centerDialogPreview = true
      this.form = row
    },
    editContent(row) {
      this.centerDialogEdit = true
      this.form = row
    },
    delContent(row, index) {
      DeleteContent({ 'id': row.id }).then((res) => {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.$refs[`popover-${index}`].doClose()
        this.load()
      })
    },
    sendAddContent() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          CreateContent(this.form).then(res => {
            this.$notify({
              title: '成功',
              message: res.msg,
              type: 'success'
            })
            this.load()
          })
          this.centerDialogAdd = false
        } else {
          this.centerDialogAdd = true
        }
      })
    },
    sendEditContent() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          UpdateContent(this.form).then(res => {
            this.$notify({
              title: '成功',
              message: res.msg,
              type: 'success'
            })
            this.load()
          })
          this.centerDialogEdit = false
        } else {
          this.centerDialogEdit = true
        }
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  }

}
</script>

<style scoped lang="scss">

.box-card{
  padding: 10px;
  box-shadow: 0 0 32px 7px rgba(0,0,0,.05);
}

</style>
